<!doctype html>
<html class="fixed">

<head>

	<!-- Basic -->
	<meta charset="UTF-8">

	<title>添加试题</title>
	<meta name="keywords" content="HTML5 Admin Template" />
	<meta name="description" content="JSOFT Admin - Responsive HTML5 Template">


	<!-- Mobile Metas -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

	<!-- Web Fonts  -->
	<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light"
		rel="stylesheet" type="text/css">

	<!-- Vendor CSS -->
	<link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.css" />
	<link rel="stylesheet" href="assets/vendor/bootstrap-table-master/bootstrap-table.css" />
	<link rel="stylesheet" href="assets/vendor/bootstrap-table-master/bootstrap-table.css" />
	<link rel="stylesheet" href="assets/vendor/font-awesome/css/font-awesome.css" />
	<link rel="stylesheet" href="assets/vendor/magnific-popup/magnific-popup.css" />
	<link rel="stylesheet" href="assets/vendor/bootstrap-datepicker/css/datepicker3.css" />
	<link rel="stylesheet" href="assets/vendor/bootstrap-multiselect/bootstrap-multiselect.css" />

	<!-- Specific Page Vendor CSS -->
	<link rel="stylesheet" href="assets/vendor/select2/select2.css" />
	<link rel="stylesheet" href="assets/vendor/jquery-datatables-bs3/assets/css/datatables.css" />

	<!-- Theme CSS -->
	<link rel="stylesheet" href="assets/stylesheets/theme.css" />

	<!-- Skin CSS -->
	<link rel="stylesheet" href="assets/stylesheets/skins/default.css" />

	<!-- Theme Custom CSS -->
	<link rel="stylesheet" href="assets/stylesheets/theme-custom.css">

	<!-- Head Libs -->
	<script src="assets/vendor/modernizr/modernizr.js"></script>

</head>

<body>
	<div class="body">
		<section role="main">
			<!-- start: page -->
			<div class="row">
				<div class="col-xs-12">
					<section class="panel form-wizard" id="w1">
						<header class="panel-heading">
							<div class="panel-actions">
								<a href="#" class="fa fa-caret-down"></a>
								<a href="#" class="fa fa-times"></a>
							</div>
							<h2 class="panel-title">添加试题</h2>
						</header>
						<section class="panel">
							<div class="panel-body">
								<form action="" class="form-horizontal">
									<div class="form-group">
										<label for="" class="col-sm-2 control-label">题目类型<span
												class="required">*</span></label>
										<div class="col-sm-9">
											<select>
												<option selected="selected">单选题</option>
												<option>多选题</option>
												<option>判断题</option>
											</select>
										</div>
									</div>
									<div class="form-group">
										<label for="" class="col-sm-2 control-label">难度等级<span
												class="required">*</span></label>
										<div class="col-sm-9">
											<select>
												<option selected="selected">普通</option>
												<option>较难</option>
											</select>
										</div>
									</div>
									<div class="form-group">
										<label for="" class="col-sm-2 control-label">归属题库<span
												class="required">*</span></label>
										<div class="col-sm-3">
											<select id="sel_search_checkBox" multiple="multiple">
												<option selected="selected">题库1</option>
												<option>题库2</option>
												<option>题库3</option>
											</select>
										</div>
									</div>
									<div class="form-group">
										<label for="" class="col-sm-2 control-label">题目内容<span
												class="required">*</span></label>
										<div class="col-sm-7">
											<textarea class="form-control" rows="3" id="testContent"
												required></textarea>
										</div>
									</div>
									<div class="form-group">
										<label for="" class="col-sm-2 control-label">整题解析</label>
										<div class="col-sm-7">
											<textarea class="form-control" rows="3" id="testResolution"></textarea>
										</div>
									</div>
								</form>
							</div>
						</section>

						<section class="panel">
							<div class="panel-body">
								<!-- <button type="button" class="mb-xs mt-xs mr-xs btn btn-primary"><i
										class="fa fa-plus" aria-hidden="true"></i> 添加</button> -->
								<div id="toolbar" class="btn-group">
									<button id="btn_add" type="button" class="btn btn-default">
										<span class="glyphicon glyphicon-plus" aria-hidden="true"></span><a href="#"
											target="_blank" style="color: #000;text-decoration: none;">新增</a>
									</button>
									<button id="btn_edit" type="button" class="btn btn-default">
										<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
									</button>
									<button id="btn_delete" type="button" class="btn btn-default">
										<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
									</button>
								</div>
								<table id="tb_addTest"></table>
								<button type="button" class="mb-xs mt-xs mr-xs btn btn-primary">保存</button>
								<button type="button" class="mb-xs mt-xs mr-xs btn btn-default">返回</button>
							</div>
						</section>
					</section>
				</div>
			</div>

		</section>
		<aside id="sidebar-right" class="sidebar-right">
			<div class="nano">
				<div class="nano-content">
					<a href="#" class="mobile-close visible-xs">
						Collapse <i class="fa fa-chevron-right"></i>
					</a>

					<div class="sidebar-right-wrapper">

						<div class="sidebar-widget widget-calendar">
							<h6>Upcoming Tasks</h6>
							<div data-plugin-datepicker data-plugin-skin="dark"></div>

							<ul>
								<li>
									<time datetime="2014-04-19T00:00+00:00">04/19/2014</time>
									<span>Company Meeting</span>
								</li>
							</ul>
						</div>

						<div class="sidebar-widget widget-friends">
							<h6>Friends</h6>
							<ul>
								<li class="status-online">
									<figure class="profile-picture">
										<img src="assets/images/!sample-user.jpg" alt="Joseph Doe" class="img-circle">
									</figure>
									<div class="profile-info">
										<span class="name">Joseph Doe Junior</span>
										<span class="title">Hey, how are you?</span>
									</div>
								</li>
								<li class="status-online">
									<figure class="profile-picture">
										<img src="assets/images/!sample-user.jpg" alt="Joseph Doe" class="img-circle">
									</figure>
									<div class="profile-info">
										<span class="name">Joseph Doe Junior</span>
										<span class="title">Hey, how are you?</span>
									</div>
								</li>
								<li class="status-offline">
									<figure class="profile-picture">
										<img src="assets/images/!sample-user.jpg" alt="Joseph Doe" class="img-circle">
									</figure>
									<div class="profile-info">
										<span class="name">Joseph Doe Junior</span>
										<span class="title">Hey, how are you?</span>
									</div>
								</li>
								<li class="status-offline">
									<figure class="profile-picture">
										<img src="assets/images/!sample-user.jpg" alt="Joseph Doe" class="img-circle">
									</figure>
									<div class="profile-info">
										<span class="name">Joseph Doe Junior</span>
										<span class="title">Hey, how are you?</span>
									</div>
								</li>
							</ul>
						</div>

					</div>
				</div>
			</div>
		</aside>
	</div>

	<!-- <div id="dialog" class="modal-block mfp-hide">
		<section class="panel">
			<header class="panel-heading">
				<h2 class="panel-title">确定吗？</h2>
			</header>
			<div class="panel-body">
				<div class="modal-wrapper">
					<div class="modal-text">
						<p>确定删除这行内容吗？</p>
					</div>
				</div>
			</div>
			<footer class="panel-footer">
				<div class="row">
					<div class="col-md-12 text-right">
						<button id="dialogConfirm" class="btn btn-primary">确定</button>
						<button id="dialogCancel" class="btn btn-default">取消</button>
					</div>
				</div>
			</footer>
		</section>
	</div> -->
	<style>
		.multiselect-container {
			/*下拉框的样式*/
			width: 195px;
		}

		.multiselect-container>li>a>label {
			line-height: 28px;
			font-size: 12px;
		}

		.multiselect-container>li>a>label>input[type='radio'] {
			margin-top: 7px;
		}

		.multiselect-item.multiselect-all.active {
			border-bottom: 1px solid #ccc !important;
		}
		
		.multiselect.dropdown-toggle.btn.btn-default {
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-between;
		}

		.multiselect.dropdown-toggle.btn.btn-default .caret {
			margin-top: 8px;
		}

		.multiselect.dropdown-toggle.btn.btn-default:link,
		.multiselect.dropdown-toggle.btn.btn-default:visited,
		.multiselect.dropdown-toggle.btn.btn-default:focus,
		.multiselect.dropdown-toggle.btn.btn-default:hover,
		.multiselect.dropdown-toggle.btn.btn-default:active,
		.btn-default.active,
		.btn-default:active,
		.open>.dropdown-toggle.btn-default {
			background: #fff;
			outline: none;
			border: 1px solid #ccc;
			box-shadow: none;
		}

		.dropdown-menu>.active>a,
		.dropdown-menu>.active>a:focus,
		.dropdown-menu>.active>a:hover {
			background: #34495e;
		}

		.multiselect-selected-text {
			font-size: 13px;
			font-family: '微软雅黑', '宋体';
			width: 100%;
			float: left;
			text-align: left;
		}

		.btn.btn-default {
			padding-right: 15px;
		}
	</style>
	<!-- Vendor -->
	<script src="assets/vendor/jquery/jquery.js"></script>
	<script src="assets/vendor/jquery-browser-mobile/jquery.browser.mobile.js"></script>
	<script src="assets/vendor/bootstrap/js/bootstrap.js"></script>
	<script src="assets/vendor/bootstrap-table-master/bootstrap-table.js"></script>
	<script src="assets/vendor/bootstrap-table-master/bootstrap-table-zh-CN.js"></script>
	<script src="assets/vendor/bootstrap-table-master/bootstrap-table-editable.min.js"></script>
	<script src="assets/vendor/nanoscroller/nanoscroller.js"></script>
	<script src="assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
	<script src="assets/vendor/bootstrap-multiselect/bootstrap-multiselect.js"></script>
	<script src="assets/vendor/magnific-popup/magnific-popup.js"></script>
	<script src="assets/vendor/jquery-placeholder/jquery.placeholder.js"></script>

	<!-- Specific Page Vendor -->
	<script src="assets/vendor/jquery-validation/jquery.validate.js"></script>
	<script src="assets/vendor/bootstrap-wizard/jquery.bootstrap.wizard.js"></script>
	<script src="assets/vendor/pnotify/pnotify.custom.js"></script>

	<!-- Theme Base, Components and Settings -->
	<script src="assets/javascripts/theme.js"></script>

	<!-- Theme Custom -->
	<script src="assets/javascripts/theme.custom.js"></script>

	<!-- Theme Initialization Files -->
	<script src="assets/javascripts/theme.init.js"></script>


	<!-- Examples -->
	<script src="assets/javascripts/forms/examples.wizard.js"></script>
	<script>
		$(function () {

			//1.初始化Table
			var oTable = new TableInit();
			oTable.Init();

			//2.初始化Button的点击事件
			var oButtonInit = new ButtonInit();
			oButtonInit.Init();

		});


		var TableInit = function () {
			var oTableInit = new Object();
			//初始化Table
			oTableInit.Init = function () {
				$('#tb_addTest').bootstrapTable({
					url: '/Home/GetaddTest',         //请求后台的URL（*）
					method: 'get',                      //请求方式（*）
					toolbar: '#toolbar',                //工具按钮用哪个容器
					striped: true,                      //是否显示行间隔色
					cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
					pagination: true,                   //是否显示分页（*）
					sortable: false,                     //是否启用排序
					sortOrder: "asc",                   //排序方式
					queryParams: oTableInit.queryParams,//传递参数（*）
					sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
					pageNumber: 1,                       //初始化加载第一页，默认第一页
					pageSize: 10,                       //每页的记录行数（*）
					pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
					search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
					strictSearch: true,
					showColumns: true,                  //是否显示所有的列
					showRefresh: true,                  //是否显示刷新按钮
					minimumCountColumns: 2,             //最少允许的列数
					clickToSelect: true,                //是否启用点击选中行
					// height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
					uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
					showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
					cardView: false,                    //是否显示详细视图
					detailView: false,                   //是否显示父子表
					columns: [{
						checkbox: true
					}, {
						field: 'istestAnswer',
						title: '是否答案',
					}, {
						field: 'testAnswerContent',
						title: '答案内容',
						editable:true
					}, {
						field: 'testAnswerParse',
						title: '答案解析',
						editable:true
					}, {
						title: '操作',
						align: 'center',
						formatter: function (value, row, index) {
							var actions = [];
							actions.push('<a class="btn btn-danger btn-xs href="javascript:void(0)" onclick="$.operate.remove(\'' + row.examId + '\')"><i class="fa fa-eye"></i>删除</a>');
							// actions.push('<a class="btn btn-info btn-xs href="javascript:void(0)" onclick="resetPwd(\'' + row.examId + '\')"><i class="fa fa-key"></i>重置密码</a>');
							return actions.join('');
						}
					}],
					onEditableSave: function (field, row, oldValue, $el) {
						$.ajax({
							type: "post",
							url: "/Editable/Edit",
							data: { strJson: JSON.stringify(row) },
							success: function (data, status) {
								if (status == "success") {
									alert("编辑成功");
								}
							},
							error: function () {
								alert("Error");
							},
							complete: function () {
							}
						});
					}
				});
			};

			//得到查询的参数
			oTableInit.queryParams = function (params) {
				var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
					limit: params.limit,   //页面大小
					offset: params.offset,  //页码
					addTestName: $("#txt_search_addTestName").val(),
					statu: $("#txt_search_statu").val()
				};
				return temp;
			};
			return oTableInit;
		};


		var ButtonInit = function () {
			var oInit = new Object();
			var postdata = {};

			oInit.Init = function () {
				//初始化页面上面的按钮事件

			};

			return oInit;
		};
		// 选择下拉列表
		$("select").multiselect({
			buttonWidth: 195,  //选择框的大小
			includeSelectAllOption: false,//是否现实全选
		});
		// $('#sel_search_radio').multiselect({
		// 	buttonWidth: 195,
		// 	placeholder: "请选择",
		// 	single: true
		// });
		$('#sel_search_checkBox').multiselect({
			buttonWidth: 195,
			placeholder: "请选择",
			filter: true
		});

	</script>
	<!-- Examples -->

</body>

</html>